$preloader-max-height: 20px;
$preloader-color: white;
$spiner-height: 20px;
$spiner-color: white;

@keyframes line-scale {
  0%, 40%, 100% {
    -webkit-transform: scaleY(.4);
    transform: scaleY(.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes circle-fade-delay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.preloader {
  //height: $preloaderMaxHeight;
  display: inline-block;

  background-color: rgba(0,0,0,.2);
  height: $preloader-max-height + 20px;
  width: $preloader-max-height + 20px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  div {
    position: relative;
    box-sizing: content-box;
    color: $preloader-color;
    background: $preloader-color;
    border: 0 solid $preloader-color;
    display: inline-block;
    width: 2px;
    height: $preloader-max-height;
    margin: 0 1px;
    float: left;
    border-radius: 0;
    animation: line-scale 1.2s infinite ease;
    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        animation-delay: -(1.3s - ($i * .1));
      }
    }
    //&:nth-child(1) {
    //  animation-delay: -1.2s;
    //}
    //&:nth-child(2) {
    //  animation-delay: -1.1s;
    //}
    //&:nth-child(3) {
    //  animation-delay: -1s;
    //}
    //&:nth-child(4) {
    //  animation-delay: -.9s;
    //}
    //&:nth-child(5) {
    //  animation-delay: -.8s;
    //}
  }
  &:after {
    display: table;
    line-height: 0;
    clear: both;
    content: "";
  }
}

.spinner {
  width: $spiner-height;
  height: $spiner-height;
  position: relative;
  user-select: none;
  div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &:before {
      content: '';
      display: block;
      margin: 0 auto;
      width: 12%;
      height: 12%;
      background-color: $spiner-color;
      border-radius: 100%;
      animation: circle-fade-delay 1.2s infinite ease-in-out both;
    }

    @for $i from 1 through 12 {
      &:nth-child(#{$i}) {
        transform: rotate(30deg * $i);
        &:before {
          animation-delay: -(1.1s - ($i * .1));
        }
      }
    }
  }
}

